<script lang="tsx" name="Checkbox">
  /**
   *  title
   * @description: description
   * @author SunYanMing<95317356@qq.com>
   * @property {Boolean} props desc info
   * @example <Checkbox />
   * @date 2023/11/16
   */

  import { defineComponent, ref, watch, toValue } from 'vue';

  export default defineComponent({
    name: 'Checkbox',

    inheritAttrs: true,
    props: {
      modelValue: {
        type: [String, Number, Array],
        default: undefined,
      },
      options: {
        type: Array,
        default: () => [],
      },

      labelField: {
        type: String,
        default: 'label',
      },
      valueField: {
        type: String,
        default: 'value',
      },
    },

    emits: ['update:modelValue'],
    setup(props, cxt) {
      const value = ref(props.modelValue);
      watch(
        () => value.value,
        (val) => {
          cxt.emit('update:modelValue', toValue(val));
        },
        {
          immediate: true,
        },
      );
      return {
        value,
      };
    },
  });
</script>
<template>
  <el-checkbox-group v-model="value" v-bind="{ ...$props, ...$attrs }">
    <template #[key]="data" v-for="key in Object.keys($slots)">
      <slot :name="key" v-bind="data || {}"></slot>
    </template>
    <el-checkbox
      v-for="item in options"
      :label="item[valueField]"
      :value="item[valueField]"
      :key="item[valueField]"
    >
      {{ item[labelField] }}
    </el-checkbox>
  </el-checkbox-group>
</template>

<style scoped></style>
